<template>
  <div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <i class="icon icon-modal-close" @click="close()"></i>
          <span class="modal-title">应用管理</span>
        </div>
        <div class="modal-body">
          <div class="install">
            <div class="install-title">
              已安装应用: (
              <span class="red">0</span>)
            </div>
            <div class="install-container">
              <div class="app-panel" v-for="app in apps">
                <div class="app-img">
                  <img :src="app.img">
                </div>
                <div class="app-name text-inline">{{app.name}}</div>
                <i class="icon icon-del"></i>
              </div>
            </div>
          </div>
          <div class="uninstall">
            <div class="uninstall-title">请勾选需要安装的应用:</div>
            <div class="uninstall-container">
              <div class="app-panel" v-for="app in apps">
                <div class="app-img">
                  <img :src="app.img">
                </div>
                <div class="app-name text-inline">{{app.name}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger btn-sm" @click="close()">关闭</button>
          <button type="button" class="btn btn-primary btn-sm">确定</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      apps: [
        { id: 1, name: "斗破苍sssss穹", img: require("../../../static/img/suolo.jpg") },
        { id: 2, name: "斗破苍sss穹", img: require("../../../static/img/suolo.jpg") },
        { id: 3, name: "斗破苍穹", img: require("../../../static/img/suolo.jpg") },
        { id: 4, name: "斗破苍穹", img: require("../../../static/img/suolo.jpg") },
        { id: 5, name: "斗破苍穹", img: require("../../../static/img/suolo.jpg") },
        { id: 6, name: "斗破苍穹", img: require("../../../static/img/suolo.jpg") },
        { id: 7, name: "斗破苍穹", img: require("../../../static/img/suolo.jpg") },
        { id: 8, name: "斗破苍穹", img: require("../../../static/img/suolo.jpg") }
      ]
    };
  },
  methods: {
    close() {
      this.$store.commit("setDialogStatus", {
        dialog: "appInstallDialog",
        isBoolean: false
      });
    }
  }
};
</script>

<style lang="scss" scoped>
$primary: #007bff;
$primary-shadow: rgba(82, 168, 236, 0.6);
$primary-hover: rgba(0, 123, 255, 0.5);
$white-light: #f5f5f5;
.modal-body {
  display: flex;
  flex-direction: column;
}
.install {
  padding: 10px;
  border: 1px solid $white-light;
  height: auto;
  .install-title {
    padding: 0 5px;
    background-color: $white-light;
  }
  .install-container {
  }
}
.uninstall {
  padding: 10px;
  border: 1px solid $white-light;
  height: auto;
  .uninstall-title {
    padding: 0 5px;
    background-color: $white-light;
  }
  .uninstall-container {
  }
}
.app-panel {
  position: relative;
  float: left;
  text-align: center;
  padding: 5px;
  &:hover {
    .icon-del {
      display: block;
    }
  }
  .icon-del {
    position: absolute;
    cursor:pointer;
    display: none;
    right: 3px;
    top: 0;
    &:before {
      content: "\e617";
      font-size: 12px;
      color: red;
    }
  }
  .app-img {
    position: relative;
    padding: 10px 10px 0;
    img {
      width: 40px;
      height: 40px;
    }
  }
  .app-name {
    width: 64px;
    margin-top: 5px;
  }
}
</style>